<template>
  <el-card style="height: 100%" :shadow="shadowShow">
    <div class="reportPreview">
      <div ref="reportPreviewBox" class="reportPreviewBox">
        <!-- <p v-show="isConfirm">{{ $t('caseorder.anli92') }}</p>
        <p v-show="!isConfirm">{{ $t('caseorder.anli93') }}</p> -->
        <h3 class="reportPreview_title">{{ $t('caseorder.anli82') }}</h3>
        <div class="reportPreview_sub_title">
          <span>{{ $t('caseorder.anli83') }}：{{ receiveData.generationTime }}</span>
          <span>{{ $t('caseorder.anli84') }}：{{ receiveData.user_realName }}</span>
        </div>

        <div class="reportPreview_info">
          <div>
            <span class="result_text">{{ $t('caseorder.anli85') }}</span>
            <span
              class="result_reason"
              v-show="dataObj && dataObj.order && dataObj.order.orderStatus !== 4"
              >{{ $t('caseorder.anli86') }}</span
            >
            <span
              class="result_reason"
              v-show="dataObj && dataObj.order && dataObj.order.orderStatus === 4"
              >{{ $t('caseorder.anli87') }}</span
            >
          </div>
          <div class="reportPreview_info_box">
            <el-row>
              <el-col :span="8">
                <span
                  >{{ $t('caseorder.anli64') }}：{{
                    dataObj && dataObj.order ? dataObj.order.id : '--'
                  }}</span
                >
              </el-col>
              <el-col :span="8">
                <span
                  >{{ $t('caseorder.yulan.yulan38') }}：
                  {{ dataObj && dataObj.order ? dataObj.order.patientName : '--' }}</span
                >
              </el-col>
              <el-col :span="8">
                <span
                  >{{ $t('caseorder.yulan.yulan117') }}：{{
                    dataObj && dataObj.order ? dataObj.order.orderDataTypeName : '--'
                  }}</span
                >
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <span
                  >{{ $t('caseorder.yulan.yulan3') }}：{{
                    dataObj && dataObj.order ? dataObj.order.doctorName : '--'
                  }}</span
                >
              </el-col>
              <el-col :span="8">
                <span
                  >{{ $t('caseorder.yulan.yulan4') }}：{{
                    dataObj && dataObj.order ? dataObj.order.creatorDeptName : '--'
                  }}</span
                >
              </el-col>
              <el-col :span="8">
                <span
                  >{{ $t('caseorder.yulan.yulan108') }}：{{
                    dataObj && dataObj.order ? dataObj.order.skillDeptName : '--'
                  }}</span
                >
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="screenshot">
          <Screenshot :mouthImgs="receiveData.mouthImgs" />
        </div>

        <div class="review_list">
          <div class="detail_header">
            <span class="title">{{ $t('caseorder.anli75') }}</span>
          </div>
          <reviewList
            ref="reviewList"
            :isshowQualified="true"
            :isPreview="false"
            :res_form="res_form"
          />
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import Screenshot from '@/views/order/common/Screenshot';
import reviewList from '@/views/order/common/reviewList';
import { formatDate } from '@/utils/index';
import Cookies from 'js-cookie';
import { downloadPDF } from '@/utils/pdf.js';
export default {
  name: 'reportPreview',

  components: {
    Screenshot,
    reviewList,
  },

  data() {
    return {
      receiveData: {
        user_realName: '',
        id: '',
        languageType: '',
        token: '',
        timeZone: '',
        generationTime: '',
        mouthImgs: [],
      },

      dataObj: {},
      res_form: {
        remarks: '',
        items: [],
      },
    };
  },

  created() {
    // 获取接收的数据
    this.getReceiveData();

    // 请求详情的数据等
    this.getOrderInfo();
  },
  mounted() {},

  methods: {
    getReceiveData() {
      let url = window.location.href;
      let params = decodeURIComponent(url.split('?')[1]);
      this.receiveData = {
        user_realName: params.split('&')[0].split('=')[1],
        id: params.split('&')[1].split('=')[1],
        languageType: params.split('&')[2].split('=')[1],
        token: params.split('&')[3].split('=')[1],
        timeZone: params.split('&')[4].split('=')[1],
        generationTime: formatDate(new Date(), 'second'),
      };

      this.$i18n.locale = this.receiveData.languageType;
    },

    getOrderInfo() {
      this.$http
        .get(
          `/order/selectDetailPass?id=${
            this.receiveData.id
          }&languageType=${this.receiveData.languageType.toString()}&token=${
            this.receiveData.token
          }&timeZone=${this.receiveData.timeZone}`,
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.dataObj = res.data;
            this.$nextTick(() => {
              let count = 0;
              const newMouthImgs = JSON.parse(this.dataObj.order.mouthImgs);
              newMouthImgs.forEach((item) => {
                count++;
                if (item.url) {
                  var image = new Image();
                  image.src = item.url + '?v=' + Math.random(); // 处理缓存
                  image.crossOrigin = '*'; // 支持跨域图片
                  image.onload = () => {
                    var canvas = document.createElement('canvas');
                    var context = canvas.getContext('2d');
                    canvas.width = image.width;
                    canvas.height = image.height;
                    context.drawImage(image, 0, 0, image.width, image.height);
                    const ndata = canvas.toDataURL('image/jpeg', 1.0);
                    item.url = ndata;
                  };
                }
              });
              if (count == newMouthImgs.length) {
                this.receiveData.mouthImgs = newMouthImgs;
              }
              this.showDictData();
            });
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },

    showDictData() {
      this.$http
        .get('/sys/dict/data/showDictDataPass?dictTypeId=' + this.dataObj.order.reportType)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            const formData = new FormData();
            formData.append('orderId', this.dataObj.order.id);
            this.$http
              .post(
                '/digitalImpression/showDigitalImpressionPass?reportType=' +
                  this.dataObj.order.reportType,
                formData,
              )
              .then(({ data: echoRes }) => {
                if (echoRes.code !== 0) {
                  return this.$message.error(echoRes.msg);
                } else {
                  let res_form = JSON.parse(JSON.stringify(this.res_form));
                  if (echoRes.data.data && echoRes.data.data.length > 0) {
                    res_form.remarks = echoRes.data.data[0].notes;
                  } else {
                    res_form.remarks = '';
                  }
                  res_form.items = res.data;
                  let checkCount = 0;
                  if (res_form.items && res_form.items.length > 0) {
                    res_form.items.forEach((item) => {
                      if (echoRes.data.data && echoRes.data.data.length > 0) {
                        item['check'] = echoRes.data.data[0][item.keyItem];
                        item['check'] = item['check'] === '1' ? true : false;
                        if (item['check']) {
                          checkCount++;
                        }
                      } else {
                        item['check'] = false;
                      }

                      item['list'] = [];
                      if(echoRes.data && echoRes.data.reportTypeItem && echoRes.data.reportTypeItem.length > 0){
                        echoRes.data.reportTypeItem.forEach((item1) => {
                          if (item1.reportTypeItem === item.id) {
                            item['list'].push({
                              examineTyle: item1.reportTypeItem,
                              description: item1.problemDescription,
                              picPath: item1.fileUrl,
                              id: item1.id,
                              check: false,
                            });
                          }
                        });
                      }
                    
                    });
                  }
                  if (checkCount === res_form.items.length) {
                    res_form['isCheckAll'] = true;
                  } else {
                    res_form['isCheckAll'] = false;
                  }
                  this.res_form = JSON.parse(JSON.stringify(res_form));
                }
              })
              .catch((err) => {
                console.log('err', err);
              });
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.reportPreview {
  height: 100%;
  font-size: 16px;
  // height: 650px;
  overflow: scroll;

  > .reportPreviewBox {
    overflow: scroll;
    > p {
      color: red;
      margin-bottom: 15px;
    }
  }

  > div {
    margin-top: 10px;
    width: 99%;
    padding: 15px;
  }

  .detail_header {
    margin-bottom: 10px;

    .title {
      font-size: 16px;
      font-weight: 800;
      line-height: 20px;
      color: #003e67;
    }
  }

  .reportPreview_title {
    text-align: center;
    margin-bottom: 15px;
  }

  .reportPreview_sub_title {
    text-align: center;

    span {
      display: inline-block;
      margin-right: 15px;
    }
  }

  .reportPreview_info {
    margin-top: 15px;

    > div:nth-child(1) {
      display: flex;
      align-items: center;
    }

    .result_text {
      padding: 10px;
      background: #003e67;
      color: #ffffff;
      display: inline-block;
      margin-right: 10px;
      width: 150px;
      text-align: center;
    }

    .result_reason {
    }

    .reportPreview_info_box {
      margin-top: 15px;
      padding: 10px;
      border: 1px solid #ebeef5;

      span {
        display: inline-block;
        height: 35px;
        line-height: 35px;
      }
    }
  }
}
</style>
